{{define "index"}}
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>{{.Title}}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../static/layui/css/modules/code.css" />
        <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
        <link rel="stylesheet" href="../../static/default/default.css" />
        <link rel="stylesheet" href="../../static/default/modal.css" />
        <link rel="stylesheet" href="../../static/iconfont.css" />
        <link rel="icon" href="../../static/images/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="../../static/assets/waifu1.css"/>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="../../static/layui/layui.js"></script>
        <script>
            $(document).ready(function(){
               
               $("body").ready(function(){
                   var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
                
               $(window).resize(function(){
                var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
               var txurl="{{.UserInfo.TxURL}}?time="+Math.random();
               $("#tximg").attr('src',txurl);
            });
       </script>
    </head>
    <body>
        <!--导航栏-->
        {{template "navigate"}}
        <div id="main">
            <div id="top" class="allwidth">
                <div id="t_left" class="left">
                    <div id="user">
                        <div id="portrait">
                            <div id="tx">
                                <img id="tximg"  />
                            </div>
                        </div>
                        <div id="user_info">
                            <h5>{{.UserInfo.UserName}}</h5>
                            <p>{{.UserInfo.Brief}}</p>
                            <p id="email">E-mail:<a href="mailto:{{.UserInfo.Email}}">{{.UserInfo.Email}}</a></p>
                            <span id="summary" >
                                <a href="/article/artclassifylst?index=1&title=所有文章">日志{{.UserInfo.LogNum}}</a>&nbsp;|
                                <a href="/article/artclassify?index=1&param=0">分类{{.UserInfo.Classify}}</a>&nbsp;|
                                <a href="/article/artclassify?index=1&param=1">标签{{.UserInfo.Tags}}</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div id="t_middle" class="middle">
                    <!--顶部，轮播-->
                    <div id="t_wheel">
                        <div class="layui-carousel" id="wheel" lay-filter="test4">
                            <div carousel-item="" >
                                {{range.Pics}}
                                <div class="lb">
                                  <img class="lb_item" src="{{.}}" />
                                </div>
                                {{end}}           
                            </div>
                        </div> 
                </div>
                </div>
                <div id="t_right" class="right">
                    <div id="date"></div>
                </div>
                <div class="clearfloat"></div>
            </div>
            <div id="middle" class="allwidth">
                <div id="m_left" class="left">
                        <ul class="layui-nav layui-nav-tree left-tree" lay-filter="test">
                              {{range.Left}}
                                <li class="layui-nav-item layui-nav-itemed">
                                    <!--/article/artclassifylst?index=1&classify={{.ID}}&title={{.Summary}}-->
                                    <a href="#"><i class="layui-icon {{.Icon}}"></i>&nbsp;&nbsp;{{.Summary}}</a>
                                    <dl class="layui-nav-child">
                                        {{range.Sub}}
                                        <dd>
                                            <a href="/article/artclassifylst?index=1&tag={{.SubID}}&title={{.NavName}}">
                                                &nbsp;&nbsp;{{.NavName}}
                                            </a>
                                        </dd>
                                        {{end}}
                                    </dl>
                                </li>
                              {{end}}
                            
                        </ul>
                    
                </div>

                <div id="m_middle" class="middle">
                    <div id="arts" >
                        {{template "artpage" .Articles}}                      
                    </div>
                     <!--分页-->
                     <div id="pager"></div>
                   
                </div>

                <div id="m_right" >
                    <div id="sreach" class="right">
                        <input type="text" id="sreachtxt"name="title" lay-verify="title" autocomplete="off" placeholder="请文章名称输关键字" class="layui-input">
                        <i id="sreachbtn" class="layui-icon layui-icon-search"></i>  
                    </div>
                    <div id="lately" class="right">
                        <div class="r_title">
                            <span>最近更新</span>
                        </div>
                        <div class="r_content">
                            <ul class="r_content_ul">
                                {{range.News}}
                                <li><a href="/article/detail?artid={{.ID}}">[{{.Num}}]&nbsp;{{.Title}}</a></li>
                                {{end}}
                            </ul>
                        </div>
                        
                    </div>
                    <div id="hot" class="right">
                        <div class="r_title">
                            <span>热门文章</span>
                        </div>
                        <div class="r_content">
                            <ul class="r_content_ul">
                                {{range.Hots}}
                                <li><a href="/article/detail?artid={{.ID}}">[{{.Num}}]&nbsp;{{.Title}}</a></li>
                                {{end}}
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="clearfloat"></div>
            </div>
            <div id="foot" class="allwidth">
                <!--看板娘-->
                {{template "kanbanniang"}}
            </div>
        </div>
    </body>
    <footer>
        {{template "footer"}}
    </footer>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element','carousel','laydate','laypage','layer'], function(){
          var element = layui.element;         
          //carousel轮播模块加载。
          var carousel = layui.carousel;
            //建造实例
              carousel.render({
              elem: '#wheel'
              ,width: '100%' //设置容器宽度
              ,arrow: 'hover' //悬停显示箭头
              ,anim: 'default' //切换动画方式
              ,interval: 3000 //自动切换
            });

            
            var laydate = layui.laydate;

            //将日期直接嵌套在指定容器中
            var dateIns = laydate.render({
              elem: '#date'
              ,position: 'static'
              ,calendar: true //是否开启公历重要节日
              //,mark: { //标记重要日子
              //  '0-10-14': '生日'
              //  ,'2020-01-18': '小年'
              //  ,'2020-01-24': '除夕'
              //  ,'2020-01-25': '春节'
              //  ,'2020-02-01': '上班'
              //} 
              //,done: function(value, date, endDate){
              //  if(date.year == 2017 && date.month == 11 && date.date == 30){
              //    dateIns.hint('一不小心就月底了呢');
              //  }
              //}
              //,change: function(value, date, endDate){
              //  layer.msg(value)
              //}
              ,showBottom:false
            });
            
            var layer=layui.layer;

            //分页控件
            var laypage = layui.laypage;
  
            //执行一个laypage实例
            laypage.render({
              elem: 'pager' 
              ,limit:'{{.ArtPageSize}}'
              ,count:'{{.ArtCount}}' //数据总数，从服务端得到
              ,jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                  //do something
                  var urlstr='/article/page?index='+obj.curr;
                  var loading = layer.msg('加载中...', {icon: 16, shade: 0.3, time:0});
                  $.ajax({
                      url:urlstr,
                      type:'get',
                      async:true,
                      timeout:5000,
                      success:function(datas){
                        layer.close(loading);
                        $("#arts").html(datas);
                      },
                      error:function(){
                        layer.close(loading);
                        layer.open({
                                title: '服务器无响应',
                                content: "服务器跑到月球啦！！"
                        });
                        //if(obj.curr>1){
                        //    obj.curr=parseInt(obj.curr)-1
                        //}
                      }
                  });
                }
              }
            });
            //搜索
            $("#sreachbtn").click(function(){
                var name= $("#sreachtxt").val();
              var namelen= $("#sreachtxt").val().length;
              if(namelen>0){
                var reg=/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
                if(reg.test(name)==false){
                    layer.msg("请输入中英文或数字！");
                    return
                }
                if(namelen>20){
                    layer.msg("输入的关键字太多啦！");
                    return;
                }
              }else{
                    layer.msg("文章名称关键字不能空！");
                    return
              }
              var urlstr='/article/artclassifylst?index=1&title=搜索&name='+name;
              window.location.href=urlstr;
            });
            
        });
        
        
    </script>
</html>
{{end}}